<template>
  <Banner />
  <div class="container">
    <div class="title mytit">{{ source.titleC }}</div>
    <!-- <div v-show="!isPlay" class="big-img" @click="handlePlay">
      <el-image class="img" :src="courseImg" fit="cover"></el-image>
      <img class="play" :src="play" alt="" />
    </div> -->
    <div class="video">
      <vue3-video-player
        v-if="source.url"
        ref="videoRef"
        :src="source.url"
        :logo="logo"
        :cover="source.cover"
        :view-core="viewCore"
        @play="playFunc"
      >
      </vue3-video-player>
    </div>

    <div class="tit mytit">章节列表</div>
    <el-carousel
      v-if="chapter.list.length > 0"
      height="300px"
      arrow="always"
      :autoplay="false"
      indicator-position="none"
      class="videoList"
      @change="handleChange"
    >
      <template v-for="(item, index) of chapter.list" :key="index">
        <el-carousel-item>
          <chapter-list
            :course-list="item"
            @player="handlePlayer"
          ></chapter-list>
        </el-carousel-item>
      </template>
    </el-carousel>
    <div class="tit mytit">课程介绍</div>
    <div class="desc" v-text="courseDesc"></div>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, reactive, ref } from 'vue'
import { useRoute } from 'vue-router'
// import HLSCore from '@cloudgeek/playcore-hls' // 如果视频需要播放m3u8格式，使用HLS

import Banner from 'components/Banner/index.vue'
import ChapterList from './ChapterList/index.vue'

import courseApis from 'apis/course'
import { IChapter } from 'apis/types/course'

import courseImg from '@/assets/images/course-img.png'
import play from '@/assets/images/play.png'

export default defineComponent({
  name: 'Detail',
  components: {
    Banner,
    ChapterList,
  },
  setup() {
    const route = useRoute()
    const chapter = reactive({
      list: [] as IChapter[][],
      one: {} as IChapter,
    })
    const source = reactive({
      title: '',
      titleC: '',
      url: '',
      cover: '',
      id: '',
    })
    // const player = ref()
    const courseDesc = ref()
    let isPlay = ref(false)
    const playFunc = () => {
      console.log('play!!!')
    }
    // 获取章节列表
    const getChapterList = (data: IChapter[]) => {
      var result = []
      for (var i = 0; i < data.length; i += 3) {
        result.push(data.slice(i, i + 3))
      }
      console.log(result)
      chapter.list = result
    }
    // 获取课程列表
    const getCourse = async () => {
      const { data } = await courseApis.getCourse({
        moduleId: '581',
        pNo: 1,
      })
      if (data?.data && data.data.length > 0) {
        // course.list = data.data
        courseDesc.value = data.data[0].courseBlurb
      }
    }
    const getChapter = async () => {
      const { data } = await courseApis.getChapter({
        courseId: Number(route.params.id),
      })
      if (data && data.length > 0) {
        const result = data[0]
        chapter.one = result
        source.cover = result.chapterCover
        source.title = result.chapterName
        source.titleC = result.chapterCname
        getChapterList(data)
        getAddress(chapter.one.chapterId)
      }
    }
    onMounted(() => {
      getChapter()
      getCourse()
    })
    const videoRef = ref()

    const handlePlayer = async (item: IChapter) => {
      source.titleC = item.chapterCname
      await getAddress(item.chapterId)
      videoRef.value.play()
    }

    // 获取视频资源
    const getAddress = async (id: number) => {
      const { data } = await courseApis.getAddress({
        chapterId: id,
        quality: '1080P',
      })
      source.url = data
    }

    const handleChange = (index: number) => {
      console.log(index)
    }
    return {
      chapter,
      courseImg,
      play,
      courseDesc,
      isPlay,
      playFunc,
      logo: courseImg,
      handleChange,
      handlePlayer,
      source,
      videoRef,
    }
  },
})
</script>

<style scoped lang="scss">
@import '../Home/index.style.scss';
.videoList {
  margin-top: 34px;
}
.video {
  margin-top: 20px;
  width: 100%;
  height: 675px;
}
:deep {
  .el-carousel__arrow {
    background: $theme-color;
    top: 124px;
  }
  .el-carousel__arrow--left {
    left: 0;
  }
  .el-carousel__arrow--right {
    right: 0;
  }
  .error-layer .error-msg-wrap {
    display: none;
  }
}
</style>
